'use client'
import { FC, PropsWithChildren, useRef, useState } from "react";
import './page.scss'
import { useRouter } from "@/i18n"
import { useTranslations } from "next-intl";

interface Props { }

const App: FC<PropsWithChildren<Props>> = (props) => {
    const t = useTranslations("SummaryPage");
    const router:any = useRouter()
    const goPage = (path = '')=>{
        if(path){
            if(path === 'home'){
                router.replace('/')
                return
            }
            
            // console.log(router);
            
            router.replace(`/affiliate/${path}`)
            return 
        }
        router.back()
    }
    const sliderRef = useRef<HTMLDivElement>(null)
    const [num,setNum] = useState(100)
    const [money,setMoney] = useState('5000')
    const handleSlide:any =(e:React.MouseEvent<HTMLDivElement,MouseEvent>)=>{
        if(sliderRef.current){
            const startX = sliderRef.current.getBoundingClientRect().x
            const x = e.clientX - startX
            const xRem = x/(144*0.6)
            const intNum = Math.round(10000*xRem)-Math.round(10000*xRem%10)
            setNum(intNum)
            const m = intNum*50
            let r = ''
            const arr = m.toString().split('')
            arr.forEach((item,i)=>{
                if(i!==(arr.length-1)&&(arr.length-i-1)%3===0){
                    r += item + ','
                }else{
                    r += item
                }
            })
            
            setMoney(r)
            const scale = ((Math.round((xRem * 10000)))/100.00).toFixed(2) + '%';
            sliderRef.current.style.width = scale
        }
    }
    return (
            <div className="vux-drawer-summary">
                <div className="vux-drawer-body" style={{ transform: "translate3d(0px,0px,0px)" }}>
                    <div className="referral router-view" id="id-router-view" style={{ backgroundColor: "rgb(237, 237, 237)" }}>
                        <div className="headerBack">
                            <div className="left" onClick={()=>goPage()}>
                                <span className="iconfont icon-xiangzuo1"/>
                            </div>
                            <div className="title">
                                {t("Afiliado")}
                                <span> - {t("title")}</span>
                            </div>
                            <div className="right" onClick={()=>goPage('home')}>
                                <span className="iconfont icon-company_nav_icon_home router-link-active"/>
                            </div>
                        </div>
                        <div className="tabs alginLeft van-tabs van-tabs--line">
                            <div className="van-tabs__wrap van-tabs__wrap--scrollable">
                                <div role="tablist" className="van-tabs__nav van-tabs__nav--line van-tabs__nav--complete">
                                    <div role="tab" className="van-tab van-tab--active" aria-selected="true" onClick={()=>goPage('summary')}>
                                        <span className="van-tab__text">{t("PAINEL")}</span>
                                    </div>
                                    <div role="tab" className="van-tab" onClick={()=>goPage('referrals')}>
                                        <span className="van-tab__text">{t("REFERÊNCIAS")}</span>
                                    </div>
                                    <div role="tab" className="van-tab" onClick={()=>goPage('report')}>
                                        <span className="van-tab__text">{t("RELATÓRIO")}</span>
                                    </div>
                                    <div role="tab" className="van-tab" onClick={()=>goPage('payments')}>
                                        <span className="van-tab__text">{t("PAGAMENTOS")}</span>
                                    </div>
                                    <div role="tab" className="van-tab" onClick={()=>goPage('faq')}>
                                        <span className="van-tab__text">{t("FAQ")}</span>
                                    </div>
                                    <div role="tab" className="van-tab">
                                        <span className="van-tab__text">{t("TUTORIAL")}</span>
                                    </div>
                                    <div className="van-tabs__line"></div>
                                </div>
                            </div>
                        </div>
                        <div className="content">
                            <div className="summary referral-router-view">
                                <div className="content">
                                    <div className="title">
                                        <div>
                                            {t("Hoje")}
                                            <span className="iconfont icon-bangzhu"/>
                                        </div>
                                    </div>
                                    <div className="cardMian">
                                        <div>
                                            <ul className="today">
                                                <li>
                                                    <span className="num">0</span>
                                                    <span> {t("Inscrições")} </span>
                                                </li>
                                                <li>
                                                    <span className="num">0</span>
                                                    <span> {t("Novos")} </span>
                                                </li>
                                                <li>
                                                    <span className="num">0</span>
                                                    <span> {t("Aposta")} </span>
                                                </li>
                                                <li>
                                                    <span className="num">0</span>
                                                    <span> {t("Comissão")} </span>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div className="content">
                                    <div className="title">
                                    <div>
                                            {t("Total")} 
                                            <span className="iconfont icon-bangzhu"/>
                                        </div>
                                    </div>
                                    <div className="cardMian">
                                    <div>
                                            <ul className="total">
                                                <li>
                                                    <span className="num">0</span>
                                                    <span> {t("Inscrições")} </span>
                                                </li>
                                                <li>
                                                    <span className="num">0</span>
                                                    <span>  {t("Jogadores")}  </span>
                                                </li>
                                                <li>
                                                    <span className="num">0</span>
                                                    <span>  {t("ApostaTotal")}  </span>
                                                </li>
                                                <li>
                                                    <span className="num">0</span>
                                                    <span> {t("Comissão")} </span>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div className="content">
                                    <div className="title">
                                    <div>
                                            {t("Comissão")}  
                                            <span className="iconfont icon-bangzhu"/>
                                        </div>
                                    </div>
                                    <div className="cardMian">
                                        <div className="vip">
                                            <div className="level">
                                                <span className="iconfont icon-vip"></span>
                                                <span className="levelNum">1</span>
                                            </div>
                                            <div>
                                                {t("Nível")}
                                                <span className="iconfont icon-tishi"></span>
                                            </div>
                                        </div>
                                        <div>
                                            <ul className="commission">
                                                <li>
                                                    <span className="num">
                                                        <span>{t("R$")}</span>
                                                        <span className="cash">0.00</span>
                                                    </span>
                                                    <span> {t("TotalPago")} </span>
                                                </li>
                                                <li>
                                                    <span className="num">
                                                        <span>{t("R$")}</span>
                                                        <span className="cash">0.00</span>
                                                    </span>
                                                    <span>  {t("Não")}  </span>
                                                </li>
                                            </ul>
                                            <div className="wallet">
                                                <div className="btn"> {t("TRANSFERIR")} </div>
                                                <div className="tip">
                                                    <span className="iconfont icon-tishi1"></span>
                                                    {t("Valor")}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div className="content shareMain">
                                    <div className="title">{t("title1")}</div>
                                    <div className="share">
                                        <ul className="sharePlatform">
                                            <li>
                                                <a href="">
                                                    <img src="/img/facebook.webp" alt="" />
                                                </a>
                                                <span>{t("Facebook")}</span>
                                            </li>
                                            <li>
                                                <a href="">
                                                    <img src="/img/WhatsApp.webp" alt="" />
                                                </a>
                                                <span>{t("WhatsApp")}</span>
                                            </li>
                                            <li>
                                                <a href="">
                                                    <img src="/img/Telegram.png" alt="" />
                                                </a>
                                                <span>{t("Telegram")}</span>
                                            </li>
                                            <li>
                                                <a href="">
                                                    <img src="/img/Twitter.webp" alt="" />
                                                </a>
                                                <span>{t("Twitter")}</span>
                                            </li>
                                            <li>
                                                <a href="">
                                                    <img src="/img/email.webp" alt="" />
                                                </a>
                                                <span>{t("Email")}</span>
                                            </li>
                                        </ul>
                                    </div>
                                    <div className="shareLink">
                                        <div className="tip">{t("content1")}</div>
                                        <div className="copyUrl">
                                            <span className="url omitWrap">{t("https")}</span>
                                            <span id="copy">{t("Cópia")}</span>
                                        </div>
                                    </div>
                                </div>
                                <div className="content">
                                    <div className="title">
                                        <div> {t("title2")}</div>
                                    </div>
                                    <div>
                                        <div className="tel-box">
                                            <a href="" className="telicon">
                                                <img src="/img/telegram.webp" alt="" />
                                            </a>
                                            <div className="hintTitle3">
                                                {t("content2-1")}
                                            </div>
                                        </div>
                                        <div className="hintTitle2">
                                            <i className="iconfont icon-tishi"></i>
                                                {t("content2-2")}  
                                            <a href="" style={{borderBottom: "1px solid rgb(109, 155, 195)",color:"#0000EE"}}>{t("business")}</a>
                                        </div>
                                    </div>
                                </div>
                                <div className="content">
                                    <div className="title">
                                        <div>
                                            {t("title3")} 
                                            <span className="iconfont icon-bangzhu"></span>
                                        </div>
                                    </div>
                                    <div className="hint">
                                        <div className="hintTitle">
                                            {t("content3")}
                                        </div>
                                        <div className="imgContent">
                                            <img src="/img/cash.png" alt="" />
                                            <div>
                                                {t("number")}{num}
                                                <br />
                                                {t("Comissão")} > {t("R$")} {money} {t("money")}
                                            </div>
                                            <div className="slider van-slider" style={{height: "0.02rem"}} onClick={handleSlide}>
                                                <div className="van-slider__bar" style={{width: "0.900901%",background: "rgb(0, 157, 128)"}} ref={sliderRef}>
                                                    <div role="slider" className="van-slider__button-wrapper" >
                                                        <div className="img"></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div className="relationSchema">
                                            <div className="groupTitle">{t("title4")}</div>
                                            <img src="/img/group_br.webp" alt="" className="groupImg"/>
                                            <ul className="rules">
                                                <li>
                                                    {t("content4-1")}
                                                    <span style={{color:"red"}}>{t("red")}</span>
                                                    .
                                                </li>
                                                <li>
                                                    {t("content4-2")}
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div className="content"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
    );
};

export default App;